import { FC, useEffect, useRef } from 'react';
import { Card } from 'antd';

import * as echarts from 'echarts';

const Index: FC = () => {
  const main = useRef(null);
  const main2 = useRef(null);

  useEffect(() => {
    initMain1();
    initMain2();
  }, []);

  const initMain1 = () => {
    // 基于准备好的dom，初始化echarts实例
    // 绘制图表
    if (main.current) {
      const myChart: any = echarts.init(main.current);
      myChart.setOption({
        title: {
          text: '年访问量',
        },
        tooltip: {
          trigger: 'axis',
          showContent: false,
        },
        dataset: {
          source: [
            ['product', '2015', '2016', '2017', '2018', '2019', '2020'],
            ['Milk Tea', 13, 18, 20, 11, 22, 25],
            ['Matcha Latte', 22, 15, 17, 25, 21, 21],
            ['Cheese Cocoa', 22, 9, 27, 20, 11, 15],
            ['Walnut Brownie', 29, 19, 12, 8, 8, 13],
          ],
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
          },
        ],
      });
    }
  };

  const initMain2 = () => {
    if (main2.current) {
      const myChart: any = echarts.init(main2.current);
      myChart.setOption({
        title: {
          text: '周访问数',
        },
        legend: {
          right: 30,
          orient: 'vertical',
          top: 'middle',
          itemGap: 40,
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [30, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: '周1' },
              { value: 38, name: '周二' },
              { value: 32, name: '周三' },
              { value: 30, name: '周四' },
              { value: 28, name: '周五' },
              { value: 26, name: '周六' },
              { value: 22, name: '周日' },
            ],
          },
        ],
      });
    }
  };

  return (
    <>
      <Card title="图标">
        <div id="main" style={{ height: 400 }} ref={main}></div>
        <div id="main2" style={{ height: 400 }} ref={main2}></div>
      </Card>
    </>
  );
};

export default Index;
